<template>

    <div :class="{'navbar': true}">
      <div class="container flex items-center h-[100px] navbar">
        <div class="logo items-center">
        </div>

        <div class="title header-title w-[100%]" >
          <ul class="container flex justify-evenly">
            <li
              v-for="(item , index) in (titleData as any)"
              :key="index"
              @mouseover="showList(index)" @mouseleave="hideList"
              >
              <a 
                href="#" class="font-black text-base"
                @click="clickTitle(index)"
                >
                {{ item.title }}
              </a>
            </li>
          </ul>
        </div>
        <div class="login w-[34px] flex justify-between">
          <div class="house mr-6">
            <a href="#"><NuxtLink to="/"><el-icon><House /></el-icon></NuxtLink></a>
          </div>
          <div class="mr-6">
            <a href="/accessories/cart"><el-icon><ShoppingCart /></el-icon></a>
          </div>
          <div class="user">
            <el-dropdown>
              <a href="#"><el-icon><User /></el-icon></a>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="isShow"><NuxtLink to="/user">User Info</NuxtLink></el-dropdown-item>
                  <!-- <el-dropdown-item v-if="isShow">Edit Info</el-dropdown-item> -->
                  <el-dropdown-item><NuxtLink to="/login">Log In</NuxtLink></el-dropdown-item>
                  <el-dropdown-item v-if="isShow" @click="logout">Log 0ut</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- productlist -->
      <div class="product-list" v-show="productlist" @mouseover="enterList" @mouseleave="hideList">
        <ul class="container flex justify-evenly product-list-item" style="margin-top: 20px;">
          <li v-for="(itme,index) in (ProductListData as any)" :key="index">
            <a href="#">
              <img
               :src="itme.src"
               alt=""
               >
              </a>
            <div class="product-list-item-title">
              <a href="#">{{ itme.title }}</a>
            </div>
          </li>
        </ul>
      </div>


      <!-- Accessorieslist -->
      <div class="accessories" v-show="Accessorieslist" @mouseover="enterList" @mouseleave="hideList">
        <div class="accessories-list">
          <div class="accessories-list-title" >
            <ul>
              <li v-for="(itme, index) in (AccessoriesData as any)" :key="index">
                <a href="#" style="font-size: 15px">{{itme.title}}</a>
              </li>
            </ul>
          </div>

          <div class="accessories-product-list">
            <ul>
              <li >
                <div class="container flex justify-evenly" style="margin-bottom: 70px;">
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/b7aef102391f499aa737.png"></a>
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/2541326680754f818e4c.png"></a>
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/6131d57cb7014fbcbd19.png"></a>
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/b7aef102391f499aa737.png"></a>
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/b36d5f6a8ce84a168857.png"></a>
                  <a><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/b8adef22543f4f7999bd.png"></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>


    </div>
</template>

<script lang="ts">
import {NIcon, NDropdown} from 'naive-ui'
import { defineComponent } from 'vue'
import { getTitle, getProductList,getAccessories } from '@/api/api';
import {useStore} from '@/static/pinia/user'
import { ElMessage } from 'element-plus'


export default defineComponent({

  setup () {
    const data = reactive({
      productlist: ref(false),
      Accessorieslist: ref(false),
      isShow: ref(false),
      titleData: ref([]),
      ProductListData: ref([]),
      AccessoriesData: ref([]),
      Event: ref(),
      Timeout: ref(),
      isSpecialStyle: ref(false)
    })
    const store = useStore()
    const route = useRoute()
    const router = useRouter()


  
    getTitle('').then((res: any) => {
      data.titleData = res._rawValue.title
    }).catch((err: any) => {
      console.log(err + '请求失败')
    })


    getProductList('').then((res: any) => {
      data.ProductListData = res._rawValue.title
    }).catch((err: any) => {
      console.log(err, '请求失败')
    })

    getAccessories('').then((res: any) => {
      data.AccessoriesData = res._rawValue.title
    }).catch((err: any) => {
      console.log(err, '请求失败')
    })


    const showList = (Event: any) => {
      data.Event = Event
      if(Event === 0){
        data.productlist = true
      }
      else if(Event === 1){
        data.Accessorieslist = true
      }
    }

    const hideList = () => {
      data.Timeout = setTimeout(() => {
        data.productlist = false
        data.Accessorieslist = false
      }, 2000);
    }


    const enterList = () => {
      clearTimeout(data.Timeout)
      if(data.Event === 0){
        data.productlist = true
        return
      }
      else if(data.Event === 1){
        data.Accessorieslist = true
        return
      }
    }

    const clickTitle = (Event: any) => {
      if(Event === 0){
        router.push({
          path: '/'
        })
        return
      }
      else if(Event === 1){
        router.push({
          path: '/accessories'
        })
        return
      }
      else if(Event === 2){
        router.push({
          path: '/solutions'
        })
        return
      }
      else if(Event === 3){
        router.push({
          path: '/resources'
        })
        return
      }
      else if(Event === 4){
        router.push({
          path: '/where'
        })
        return
      }
    }

    const checkLogin = async () => {
      store.restoreFromLocalStorage()
      if (store.userinfo) {
        data.isShow = true
      }
    }

    const logout = () => {
      localStorage.removeItem('loginData')
      data.isShow = false
      ElMessage({
        message: 'LogOut',
        type: 'warning',
        duration: 1000,
        center: true,
      })
    }

    watch(
      () => route.fullPath,
      (newPath, oldPath) => {
        checkLogin()
      }
    );

    
    return {
      ...toRefs(data),
      showList,
      hideList,
      enterList,
      logout,
      clickTitle


      
      
    }
  }
})

</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.logo {
  background: url(@/public/logo.svg) no-repeat;
  height: 39px;
  width: 128px;
}



.font-black {
  font-weight: 1000;
}


/* 下划线过渡效果 */
.header-title li {
  cursor: pointer;
  position: relative;
  transition: all 0.3s; /* 添加过渡效果 */
}

.header-title li:hover {
  transform: scale(1.2);
}

.header-title li a:hover{
    color: rgb(209, 110, 110);
    
}
.header-title li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    border-bottom: 1px solid rgb(179, 102, 102); /* 下划线大小，颜色 */
    width: 0; /* 初始下划线宽度为0，悬停时变化 */
    height: 100%; /* 下划线高度，可以根据需要调整 */
    transition: all 0.3s; /* 添加过渡效果 */
}
.header-title li a:hover::before{
    content: '';
    width: 100%;
    left: 0;
    display: inline-block;
    transform: scale(1.2);
}
/* 下划线过渡效果 */



.product-list {
    position: fixed;
    width: 100%;
    height: 300px;
    top: 80px;
    overflow: hidden;
    background: rgb(255, 255, 255);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
    transition: all 0.2s;
}


.product-list-item ul li {
  list-style: none;
  margin-left: -500px;
}



.product-list-item ul:nth-child(4) img {
  height: 50px;
}

.product-list-item-title {
  margin-top: 30px;
  text-align: center;
}

.product-list-item-title a {
  font-weight: bold;
}

.product-list-item a img:hover{
  content: '';
  transform: translateY(10px);
}


.product-list-item img {
  height: 127px;
  width: 105px;
  top: 80px;
  right: 70px;
  margin-top: 60px;
  transition: transform 0.5s;
}


.accessories {
    position: fixed;
    width: 110%;
    height: 300px;
    z-index: 999;
    top: 80px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */

  }

  .accessories-list-title {
    padding: 0 18.6875vw;
  }

  .accessories-list-title ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 50px;
    text-align: center;
  }
  .accessories-list-title li {
    list-style: none;
    overflow: hidden;
  }

  .accessories-list-title li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
  }

  .accessories-product-list {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }

  /* .accessories-product-list ul li:nth-child(6),
  .accessories-product-list ul li:nth-child(2),
  .accessories-product-list ul li:nth-child(3),
  .accessories-product-list ul li:nth-child(4),
  .accessories-product-list ul li:nth-child(5){
    display: none;
  } */



  .accessories-product-list li img {
    height: 140px;
    margin-right: 60px;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  }


</style>